<template>
  <view class="page-content">
    <view>
      <projectHead id="ProjectHead" :projectInfo="objData"></projectHead>
    </view>
    <view class="u-m-t-30">
      <view class="has-radius">
        <u-tabs-swiper
          ref="uTabs"
          :list="list"
          :current="current"
          @change="tabsChange"
          :is-scroll="false"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper"
        :style="`height:calc(100vh - 150rpx - ${px2rpx(
          height
        )}rpx - env(safe-area-inset-bottom))`"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <scroll-view
            class="swiper-page"
            v-if="item.taskList.length"
            scroll-y
            :style="`width: 100%;height:calc(100vh - 170rpx - ${px2rpx(
              height
            )}rpx - env(safe-area-inset-bottom))`"
            @scrolltolower="onreachBottom"
          >
            <view class="u-m-t-20">
              <task-item
                v-for="el in item.taskList"
                :info="el"
                :projectInfo="objData"
              ></task-item>
            </view>
          </scroll-view>
          <u-empty v-else text="暂无数据" mode="data"></u-empty>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app';
import projectHead from '../components/projectHead.vue';
import { workTaskList, WorkFlowListByPage } from '@/api/modules/project';
import taskItem from './components/taskItem.vue';
import { useDomHeight } from '@/hooks/useDomHeight';
import { px2rpx } from '@/utils/tools';

const { height } = useDomHeight('#ProjectHead');

const list = ref([
  {
    name: '待反馈',
    dataIndex: 'pendingFeedbackTaskList',
    taskList: [],
    count: 0,
  },
  {
    name: '已退回',
    dataIndex: 'returnedTaskList',
    taskList: [],
    count: 0,
  },
  {
    name: '待审批',
    dataIndex: 'pendingApprovalTaskList',
    taskList: [],
    count: 0,
  },
]);
const current = ref(0);
const swiperCurrent = ref(0);

const tabsChange = (index: number) => {
  swiperCurrent.value = index;
};
const uTabs = ref();
const transition = (e: any) => {
  let dx = e.detail.dx;
  uTabs.value.setDx(dx);
};

const animationfinish = (e: any) => {
  let curr = e.detail.current;
  uTabs.value.setFinishCurrent(curr);
  swiperCurrent.value = curr;
  current.value = curr;
};

const onreachBottom = () => {};

// 查询待反馈已退回
const getWorkTaskList = () => {
  workTaskList({
    projectId: objData.value.projectId,
  }).then((res: any) => {
    list.value[0].taskList = res.pendingFeedbackTaskList;
    list.value[0].count = res.pendingFeedbackTaskList.length;
    list.value[1].taskList = res.returnedTaskList;
    list.value[1].count = res.returnedTaskList.length;
  });
};

// 查询待审批
const getWorkTaskToApproval = () => {
  WorkFlowListByPage({
    projectId: objData.value.projectId,
    queryType: 1,
  }).then((res: any) => {
    list.value[2].taskList = res;
    list.value[2].count = res.length;
  });
};

const objData = ref<any>({});
onShow(() => {
  const { params } = (uni as any).$Router.getQuery();
  objData.value = JSON.parse(decodeURIComponent(params));
  getWorkTaskList();
  getWorkTaskToApproval();
});
</script>
<style lang="scss">
.page-content {
  padding: 30rpx;
}
.swiper {
  height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
}
.swiper-page {
  height: calc(100vh - 220rpx - env(safe-area-inset-bottom));
}
</style>
